import React,{useEffect,useState} from 'react'
import styles from "./MapContainer.css";
import AMapLoader from "@amap/amap-jsapi-loader";
import { Anchor } from "antd";
import axios from "../../axios";

export default function New() {
  let map = null;
  const [data,setData] = useState({
    wname:'',
    wdata:'',
    wuser:''
  });
  const add = async ()=>{
    const res = await axios.post('http://localhost:3000/wangadd',data);
    console.log(data);
  }

  useEffect(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "7ffe1e8647e015e1c2d7af56262573b3",
    };
    AMapLoader.load({
        key: "6e0fd473efda2d123c691f487be5e78f", 
        version: "2.0", // 指定要加载的 JSAPI 的版本
        plugins: ["AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 14, // 初始化地图级别
                center: [115.32252, 38.949597], // 初始化地图中心点位置
                pitch: 40,
                resizeEnable: true,   
                showLabel: true,
                mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
            });
            new AMap.Loca.container({
                map: new AMap.Map(New.current),
            })              
        })
        .catch((e) => {
            console.log(e);
        });
    return () => {
        map?.destroy();
    };
}, []);

  return (
    <div>
        <div>
            <h3>新增区域</h3>
        </div>
        <div style={{display:'flex',marginTop:'20px'}}>
            <h5>区域名称:</h5>
            <input value={data.wname} onChange={(e)=>setData({...data,wname:e.target.value})} type="text" style={{marginLeft:'20px',width:'240px',height:'25px'}}/>
        </div>
        <div style={{marginTop:'20px'}}>
            <h5>地图标区：</h5>
            <input type="text" value={data.wuser} onChange={(e)=>setData({...data,wuser:e.target.value})} />
        </div>

        <div
                id="container"
                className={styles.container}
                style={{ height: "480px",width:'1000px',marginLeft:'100px' }}
            >

            </div>
            <div id="map"></div>
            <div style={{marginLeft:'40%',marginTop:'20px'}}>
              <button style={{width:'80px',backgroundColor:'orange',color:'white',border:'0',height:'25px'}} onClick={()=>{add()}}>保存</button>
              <button style={{width:'80px',marginLeft:'20px',height:'25px'}}>取消</button>
            </div>
    </div>
  )
}
